
function selectTable(container, selectedTable) {
  const tables = container.querySelectorAll('table')
  for (let i = 0; i < tables.length; i++) {
    const table = tables[i]
    if (selectedTable === table) {
      table.style.borderColor = '#00ff00'
    } else {
      table.style.borderColor = '#000000'
    }
  }
}

function selectTd(container, selectedTd) {
  const tds = container.querySelectorAll('td')
  for (let i = 0; i < tds.length; i++) {
    const td = tds[i]
    if (selectedTd === td) {
      td.style.color = '#ff0000'
      td.style.background = '#888888'
    } else {
      td.style.color = '#000000'
      td.style.background = '#efefef'
    }
  }
}

/**
 *
 * @param {*} dom
 * @param {*} options
 */
export function initDataTemplate(dom, opts) {
  const container = dom
  const options = opts || {}

  const tables = options.tables || []
  for (let t = 0; t < tables.length; t++) {
    const table = tables[t]

    const tab = document.createElement('table')
    container.appendChild(tab)
    if (table.border && table.border > 0) {
      tab.className = 'data-template-table-border'
    }
    // tab.tableId = table.dataTableId
    const button = document.createElement('button')
    container.appendChild(button)
    button.innerHTML = "<i class='el-icon-circle-plus-outline'></i> 编辑"
    button.className = 'el-button el-button--mini'
    button.onclick = function() {
      options.tableSelectionChange && options.tableSelectionChange(table)
      selectTable(container, tab)
    }

    const col = table.col || 0
    const row = table.row || 0
    for (let i = 0; i < row; i++) {
      const tr = tab.insertRow()
      for (let j = 0; j < col; j++) {
        const cell = {
          row: i + 1,
          col: j + 1,
          table: table
        }
        const td = tr.insertCell()
        td.onclick = function() {
          options.cellSelectionChange && options.cellSelectionChange(cell)
          selectTd(container, td)
        }
      }
    }

    let cells = table.dataCells || []
    cells = cells.sort(compare('colOffset'))
    for (let k = 0; k < cells.length; k++) {
      const cell = cells[k]// 获取当前单元格对象
      const colOffset = cell.colOffset - 1 || 0
      const colSpan = cell.colSpan || 1
      const rowOffset = cell.rowOffset - 1 || 0
      const rowSpan = cell.rowSpan || 1
      const r = tab.rows[rowOffset]
      const c = r.cells[colOffset]
      c.innerHTML = cell.content
      c.cellId = cell.dataCellId
      if (colSpan > 1 || rowSpan > 1) {
        for (let i = rowOffset, rowMax = rowOffset + rowSpan; i < rowMax; i++) {
          const currentRow = tab.rows[i]
          for (let j = colOffset, colMax = colOffset + colSpan; j < colMax; j++) {
            const currentCell = currentRow.cells[j]
            if (i === rowOffset && j === colOffset) {
              currentCell.colSpan = colSpan
              currentCell.rowSpan = rowSpan
            } else {
              currentRow.deleteCell(j)
              j--
              colMax--
            }
          }
        }
      }
    }
  }
  function compare(property) {
    return function(a, b) {
      var value1 = a[property]
      var value2 = b[property]
      return value2　- value1
    }
  }

  console.log(container)
}
